<template>
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <router-link to="/user/location">党建地点</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>党建地点详细信息</el-breadcrumb-item>
      </el-breadcrumb>
  
      <div v-if="location">
        <h2>{{ location.name }}</h2>
        <p>地址: {{ location.address }}</p>
        <p>类型: {{ location.type }}</p>
        <p>预约人数: {{ location.number }} 人</p>
        <img :src="location.photo" alt="Location Photo" class="location-photo" />
      </div>
      <div v-else>
        <p>加载地点信息失败，正在返回...</p>
        <router-link to="/user/location">返回</router-link>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { LocationListService } from '@/api/location';  // 假设这个路径是你正确的 API 路径
  
  const route = useRoute();
  const router = useRouter();
  const location = ref(null);
  const locations = ref([]); // 用于存储所有地点信息
  
  // 获取路由中的参数
  const locationId = route.params.locationId;
  const locationName = route.params.locationName;
  
  // 在组件加载时调用 API 查询所有地点信息
  onMounted(async () => {
    try {
      // 获取所有地点信息
      const response = await LocationListService({});
      locations.value = response.data; // 假设 API 返回的数据是地点数组
      console.log('所有地点信息:', locations.value); // 输出所有地点信息到控制台
  
      // 查找传进来的地点名称对应的地点信息
      location.value = locations.value.find(loc => loc.name === locationName);
      
      if (!location.value) {
        // 如果没有找到匹配的地点，重定向到列表页面
        router.push('/user/location');
      }
    } catch (error) {
      console.error('获取地点列表失败:', error);
      // 在获取数据失败时返回上一页
      router.push('/user/location');
    }
  });
  </script>
  
  <style scoped>
  .location-photo {
    width: 100%; /* 将图片宽度设为100% */
    border-radius: 5px; /* 图片圆角 */
    margin-top: 20px; /* 上方间距 */
  }
  </style>
  